<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>☼ Hotel Ibiza ☼</title>
        <link rel="shortcut icon" href="imagenes/favicon.ico" />
        <link href="estilo.css" type="text/css" rel="stylesheet"/>
        <style type="text/css">
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style>
    </h:head>
    <h:body styleClass="texto">
        <h:form>
            <p:idleMonitor onidle="#{userSession.validarSesion()}" timeout="0"/>
        </h:form>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="120">
                    <img src="imagenes/h1.jpg" height="110"/>
                    <img style="float: right" src="imagenes/h2.jpg" height="110"/>
                </p:layoutUnit>
                <p:layoutUnit position="left" width="170">
                    <h:form>
                        <p:menu styleClass="texto" model="#{menuPpal.modelo}"/>
                    </h:form>
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <h:form id="idd">
                        <center>
                            <iframe id="iframeI" name="int" src="#{menuPpal.srx}"  width="900" height="550" style="border-width: 0; overflow:  auto"/>    
                        </center>
                    </h:form> 
                </p:layoutUnit>
                <p:layoutUnit position="right" width="170">
                    <h:form>
                        <center>
                            <p:commandButton actionListener="#{menuPpal.irHome()}" image="ui-icon ui-icon-home" update="iframeI" ajax="false"/>
                        </center>
                        <br></br>
                        <p:panel header="Panel de Usuario" styleClass="texto">
                            <h:panelGrid columns="2">
                                <h:outputLabel styleClass="textoResaltar" value="Bienvenido:"/>
                                <h:outputLabel value="#{userSession.usuarioSesion.user}"/>
                            </h:panelGrid>
                            <p:commandLink style="width: 100%" value="Mi Perfil" onclick="dialogoEditar.show()"/>
                            <br></br>
                            <p:commandLink value="Cerrar Sesión" onclick="cierre.show()"/>
                        </p:panel>
                        <br></br>
                        <p:menu styleClass="texto">
                            <p:submenu label="Conózcanos">
                                <p:menuitem value="Ver Habitaciones" url="verHabitaciones.xhtml" target="int"/>
                                <p:menuitem value="Galeria de imagenes" url="verGaleria.xhtml" target="int"/>
                                <p:menuitem value="Ubiquenos" url="verMapa.xhtml" target="int"/>
                            </p:submenu>
                        </p:menu>
                        <br></br>
                        <p:panel header="Creditos" styleClass="texto">
                            <h:outputLabel styleClass="textoResaltar" value="Desarrollado por:"/>
                            <br></br>Ricardo Vuelvas <br></br> Danilo Vargas
                            <br></br>
                            <br></br>
                            <h:outputLabel styleClass="textoResaltar" value="Mamá:"/>
                            <br></br>Maritza Galarza<br></br>
                            <br></br>
                            <h:outputLabel styleClass="textoResaltar" value="Licencia:"/>
                            <br></br>
                            GNU-GPLv3
                        </p:panel>
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </h:form>
        <h:form>
            <p:dialog header="Desactivar Cliente" widgetVar="desactivar" resizable="false" modal="true">
                <p:panel style="background: #fceeb3">
                    <div align="justify">
                        Esta acción invertirá el estado actual del cliente,
                        en caso de estar Activo pasara a Inactivo y viceversa,
                        si esta seguro de esto <b>ingrese la cédula</b> a continuación:
                    </div>
                    <h:panelGrid columns="2">
                        <p:inputText value="#{cliente.cliente.cedula}"/>
                        <p:commandButton image="ui-icon ui-icon-close" actionListener="#{cliente.desactivarCliente(false)}" oncomplete="handleCompleted(xhr, status, args)" ajax="true"/>
                    </h:panelGrid>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form>
            <p:dialog header="Cancelar Reserva" widgetVar="cancelReserva" resizable="false" modal="true">
                <p:panel style="background: #fceeb3">
                    <div align="justify">
                        Tenga en cuenta que esta operación cancelara no 
                        solo la reserva si no también salas, habitaciones y
                        y servicios que haya solicitado.
                        si esta seguro de esto <b>ingrese el codigo de la Reserva</b> a continuación:
                    </div>
                    <h:panelGrid columns="2">
                        <p:inputText value="#{reserva.reserva.codigoReserva}"/>
                        <p:commandButton image="ui-icon ui-icon-close" actionListener="#{reserva.cancelarReserva()}" oncomplete="cerrarDlg(xhr, status, args)" ajax="true"/>
                    </h:panelGrid>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form id="perfil">
            <p:dialog id="dlg" header="Mi Perfil - Editar Información" modal="true" widgetVar="dialogoEditar" width="350" resizable="false">
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Nombre Completo:"/>
                        <p:inputText value="#{userSession.usuarioSesion.nombre}" required="true" requiredMessage="Nombre es obligatorio" />
                        <h:outputLabel value="Nombre de usuario:"/>
                        <p:inputText value="#{userSession.usuarioSesion.user}" required="true" requiredMessage="Nombre de usuario es obligatorio"/>
                        <h:outputLabel value="Cédula:"/>
                        <p:inputText id="cedUser" value="#{userSession.usuarioSesion.cedula}" required="true" requiredMessage="Cédula es obligatoria"/>
                        <h:outputLabel value="Teléfono:"/>
                        <p:inputText value="#{userSession.usuarioSesion.telefono}" required="true" requiredMessage="Teléfono es obligatorio"/>
                    </h:panelGrid>
                    <f:facet name="footer">
                        <center>
                            <p:commandButton value="Guardar" actionListener="#{userSession.actualizarUsuarioSesion()}" oncomplete="handleComplete(xhr, status, args)" ajax="true" update="msj"/>
                            <p:commandButton value="Cancelar" onclick="dialogoEditar.close()"/>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
            <p:dialog header="Cierre de Sesión" resizable="false" widgetVar="cierre" modal="true">
                <p:panel>
                    <h:outputLabel value="Esta a punto de cerrar su sesión, esta seguro de esto?"/>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="2">
                                <p:commandButton value="Aceptar" actionListener="#{userSession.cerrarSesion()}" ajax="false" update="int"/>
                                <p:commandButton value="Cancelar" onclick="cierre.close()" update="int"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
            
            <script type="text/javascript">
                    function handleComplete(xhr, status, args) {
                            if(!args.validationFailed) {
                                    dialogoEditar.hide();      
                                    alert("Información de usuario modificada");
                            } 
                    }
                    function handleCompleted(xhr, status, args) {
                            if(args.conf) {
                            desactivar.hide();
                            alert("Información de cliente modificada");
                            } else
                                alert("No existe cliente con la cédula especificada :(\nIntente de nuevo");
                    }
                     function cerrarDlg(xhr, status, args) {
                            if(!args.validationFailed) {
                                    cancelReserva.hide();      
                                    alert("Información de reserva modificada");
                            } 
                    }
            </script>
        </h:form>
        <h:messages showDetail="false" showSummary="false" style="visibility: hidden"/>
    </h:body>
</html>